<template>
  <div id="app">
    <div class="map-wrapper">
      <div class="autocomplete">
        <div class="autocomplete-d1">
          搜索位置:
        </div>
      <el-autocomplete
          prefix-icon="el-icon-search"
        v-model="mapLocation.address"
        :fetch-suggestions="querySearch"
        placeholder="搜索地点、位置"
        style="width: 100%"
        :trigger-on-focus="false"
        @select="handleSelect"
      />
      </div>
      <baidu-map
        v-if="config.map_type == 1"
        class="bm-view"
        :ak="$store.state.config.map_ak"
        :center="center"
        :zoom="zoom"
        @ready="handler"
        @zoomend="handlerZoomend"
      >
        <bm-navigation
          anchor="BMAP_ANCHOR_BOTTOM_LEFT"
          :offset="{ height: 80, width: 10 }"
        ></bm-navigation>
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
          @locationSuccess="locationSuccess"
          @locationError="locationError"
        ></bm-geolocation>
      </baidu-map>

      <TianMap
        v-if="config.map_type == 2"
        class="bm-view"
        :ak="config.tian_map_ak"
        :center="tianCenter"
        :zoom="tianZoom"
        @ready="handleTianReady"
        @click="handleTianMapClick"
      >
        <TianMarker :position="tianPos" :draggable="true" @dragend="handleTianMarkerDragend"></TianMarker>
        <TianNavigation position="TOP_LEFT"></TianNavigation>
        <TianGeolocation position="BOTTOM_RIGHT"></TianGeolocation>
      </TianMap>
      <div class="location">
      <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="详细地址:">
          <el-input v-model="form.location"></el-input>
            <div class="location-prompt">
              <i class="el-icon-info"></i>
              请在地址后补足您的详细地址,如A座1603
            </div>
        </el-form-item>
      </el-form>
      </div>
    </div>
  </div>
</template>

<script>
let markerStyle = {
  color : '#e9e9e9',
  fontSize : '14px',
  height : '30px',
  lineHeight : '30px',
  fontFamily: '微软雅黑',
  backgroundColor:'#000',
  opacity:'0.75',
  border:0,
  padding:'0 10px',
  borderRadius:'30px',
}
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'; //定位
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'

import TianMap from '@/components/map/TianMap/TianMap.vue'
import TianNavigation from '@/components/map/TianMap/Navigation'
import TianGeolocation from '@/components/map/TianMap/Geolocation'
import TianMarker from '@/components/map/TianMap/Marker'

import {mapState} from 'vuex'

export default {
  name: 'Mapset',
  props: ['mapLat', 'mapLng', 'mapZoom', 'address'],
  components: {
    BaiduMap,
    BmNavigation,
    // eslint-disable-next-line vue/no-unused-components
    BmGeolocation,
    TianMap,
    TianNavigation,
    TianGeolocation,
    TianMarker
  },
  data () {
    return {
      keyword:'',
      center: { lng: 0, lat: 0 },
      zoom: 12,
      BMap: {},
      map: {},
      mapData: { lat: '', lng: '', zoom: 0, address: '' },
      form: {
        location: '',
      },
      mapLocation: {
        address: undefined,
        coordinate: undefined
      },

      tianCenter:{lng: 0, lat: 0},
      tianPos:{lng: 0, lat: 0},
      tianZoom:12,
      TMap:{},
      tianMap:{},
      tianGeocoder:{}
    }
  },
  computed: {
    ...mapState(['config'])
  },
  created () {
  },
  methods: {

    onSubmit() {
      console.log('submit!');
    },
    handleSelect(item) {
      if(this.config.map_type == 1){
        this.BMapSelectClick(item)
      } else if(this.config.map_type == 2){
        this.TianMapSelectClick(item)
      }
    },
    BMapSelectClick(item){
      var { point,value } = item
      this.mapLocation.coordinate = point
      this.form.location = value
      this.$store.commit('setBaiduMapFrom',{
        data:this.form
      })
      this.map.clearOverlays()
      this.map.addOverlay(new this.BMap.Marker(point))
      this.center.lng = point.lng
      this.center.lat = point.lat
      this.map.clearOverlays()
      this.mapZoom = 15
      this.makeMarker(point,value)
    },

    makerCenter(point) {

      if (this.map) {
        this.map.clearOverlays()
        this.map.addOverlay(new this.BMap.Marker(point))
        this.center.lng = point.lng
        this.center.lat = point.lat
        this.mapZoom = 15

        // let label = this.BMap.Label(value,{offset:this.BMap.Size(40,0)});
        // label.setStyle(markerStyle);


      }
    },

    querySearch(queryString, cb) {
      // 区分是百度地图还是天地图
      if(this.config.map_type ==1){
        this.BMapSearch(queryString, cb)
      }else if(this.config.map_type ==2) {
        this.TianMapSearch(queryString, cb)
      }
    },
    TianMapSearch(queryString, cb){
      const {tianMap,TMap} = this
      var config = {
          pageCapacity: 1000,	//每页显示的数量
          onSearchComplete: function(result){
            var list =  result.getPois()
            var s = []
            if(list.length>0){
              list.forEach(x => {
                var item = { value: x.address + x.name, point: x.lonlat }
                s.push(item)
                cb(s)
              });
            } else {
              cb(s)
            }
          }	//接收数据的回调函数
      };
      const LocalSearch = new TMap.LocalSearch(tianMap,config)
      // var bounds = tianMap.getBounds()
      LocalSearch.search(queryString,1)
    },
    BMapSearch(queryString, cb){
      var that = this
      var myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(queryString, function(point) {
        if (point) {
          that.mapLocation.coordinate = point
          that.makerCenter(point)
        } else {
          that.mapLocation.coordinate = null
        }
      }, this.locationCity)
      var options = {
        onSearchComplete: function(results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)
              var item = { value: x.address + x.title, point: x.point }
              s.push(item)
              cb(s)
            }
          } else {
            cb()
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },
    initCB(){
      if(this.config.map_type == 1){
        this.center = {
          lat: (this.mapLat!==undefined && this.mapLat>0)?this.mapLat:parseFloat(this.$store.state.config.map_lat),
          lng: (this.mapLng!==undefined && this.mapLng>0)?this.mapLng:parseFloat(this.$store.state.config.map_lng)
        }
        this.zoom = (this.zoom!==undefined && this.zoom>0)?this.zoom:parseInt(this.$store.state.config.map_zoom)
        this.setlocation()
      }else if(this.config.map_type == 2){
        this.tianCenter = {
          lat: (this.mapLat!==undefined && this.mapLat>0)?this.mapLat:parseFloat(this.$store.state.config.map_lat),
          lng: (this.mapLng!==undefined && this.mapLng>0)?this.mapLng:parseFloat(this.$store.state.config.map_lng)
        }
        this.tianZoom = (this.tianZoom!==undefined && this.tianZoom>0)?this.tianZoom:parseInt(this.$store.state.config.map_zoom)
        this.tianSetlocation()
      }
    },
    
    setlocation () {
      let that = this
      let BMap = this.BMap
      let map = this.map
      let point = new BMap.Point(this.center.lng,this.center.lat);
      map.centerAndZoom(point, this.zoom);
      map.clearOverlays();
      map.addEventListener('click', function(e) {
        map.clearOverlays();
        let markerIcon = new BMap.Icon(require("@/assets/images/marker.png"), new BMap.Size(36,40));
        let marker = new BMap.Marker(e.point,{icon:markerIcon});// 创建标注
        map.addOverlay(marker);             // 将标注添加到地图中
        let geoc = new BMap.Geocoder();
        geoc.getLocation(e.point, function(rs){
          var addComp = rs.addressComponents;
          map.clearOverlays();
          let addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
          that.form.location = addr
          that.makeMarker(e.point,addr)
          that.$store.commit('setBaiduMapFrom',{
            data:that.form
          })
        });
      });

      this.form.location = this.address

      this.$store.commit('setBaiduMapFrom',{
        data:this.form
      })
      this.makeMarker(point,this.address);
    },
    makeMarker(point,address){
      address = address ? address : '请在上方搜索或在地图中标记位置'
      let that = this
      let BMap = this.BMap
      let map = this.map
      let markerIcon = new BMap.Icon(require("@/assets/images/marker.png"), new BMap.Size(36,40));
      let marker = new BMap.Marker(point,{icon:markerIcon});// 创建标注
      map.addOverlay(marker);             // 将标注添加到地图中
      marker.enableDragging();           // 可拖拽
      let label = new BMap.Label(address,{offset:new BMap.Size(40,0)});
      label.setStyle(markerStyle);
      marker.setLabel(label);
      this.mapData.zoom = map.getZoom()
      this.mapData.lat = point.lat
      this.mapData.lng = point.lng
      this.mapData.address = address
      let geoc = new BMap.Geocoder();
      marker.addEventListener("dragend",function(e){
        geoc.getLocation(e.point, function(rs){
          var addComp = rs.addressComponents;
          map.clearOverlays();
          let addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
          that.form.location = addr
          that.makeMarker(e.point,addr)
          that.$store.commit('setBaiduMapFrom',{
            data:that.form
          })
        });
      });
    },
    handler ({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      this.setlocation()
    },
    handlerZoomend (e) {
      this.zoom = e.target.getZoom()
    },
    //定位成功回调
    locationSuccess(point){
      let that = this
      let BMap = this.BMap
      let map = this.map
      map.clearOverlays();
      let markerIcon = new BMap.Icon(require("@/assets/images/marker.png"), new BMap.Size(36,40));
      let markers = new BMap.Marker(point.point,{icon:markerIcon});// 创建标注
      map.addOverlay(markers);             // 将标注添加到地图中
      markers.enableDragging();           // 可拖拽
      let geoc = new BMap.Geocoder();
        geoc.getLocation(point.point, function(rs){
          var addComp = rs.addressComponents;
          that.form.location = addComp.province + addComp.city + addComp.district+ addComp.street + addComp.streetNumber
          let addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
          that.$store.commit('setBaiduMapFrom',{
            data:that.form
          })
          that.makeMarker(point.point,addr)
        });
    },
    //定位失败回调
    locationError(StatusCode){
      console.log(StatusCode,'StatusCode')
    },
    //天地图
    tianSetlocation(){
      const {TMap} = this
      this.tianGeocoder = new TMap.Geocoder()
      this.tianPos ={...this.tianCenter}
      this.form.location = this.address
    },
    // marker拖拽结束后
    handleTianMarkerDragend(e){
      this.tianGeocoder.getLocation(e.lnglat,(data)=>{
        const {result:{result:{addressComponent:{city,county,province,address}}}} = data
        let addr = province + city + county + address
        this.form.location = addr
        this.$store.commit('setBaiduMapFrom',{
          data:this.form
        })
        this.handelSetTianMapData(e.lnglat,addr)
      })
    },
    // 天地图初始化完成
    handleTianReady({TMap,map}){
      this.TMap = TMap
      this.tianMap = map
      this.tianSetlocation()
    },
    handleTianMapClick(e){
      this.tianPos ={...e.lnglat}
      this.tianGeocoder.getLocation(e.lnglat,(data)=>{
        const {result:{result:{addressComponent:{city,county,province,address}}}} = data
        let addr = province + city + county + address 
        this.form.location = addr
        this.$store.commit('setBaiduMapFrom',{
          data:this.form
        })
        this.handelSetTianMapData(e.lnglat,addr)
      })
    },
    handelSetTianMapData(point,address){
      const {tianMap} = this
      this.mapData.zoom = tianMap.getZoom()
      this.mapData.lat = point.lat
      this.mapData.lng = point.lng
      this.mapData.address = address
    },
    TianMapSelectClick(item){
      var { point,value } = item
      const pointAry = point.split(' ')
      var lnglat = {
        lng:pointAry[0],
        lat:pointAry[1]
      }
      this.mapLocation.coordinate = lnglat
      this.form.location = value
      this.$store.commit('setBaiduMapFrom',{
        data:this.form
      })
      this.tianCenter = {...lnglat}
      this.tianPos = {...lnglat}
      this.handelSetTianMapData(lnglat,value)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-wrapper {
  width: 100%;
  height: 100%;
}
.bm-view {
  width: 760px;
  height: 400px;
  // position: absolute;
  // margin-top:-53px;
}

// .mapicon{
//   position:fixed;
//   top:50%;
//   left:50%;
//   transform:translateX(-50%) translateY(-100%);
//   width:52px;
//   z-index:1;
// }
.autocomplete{
  display: flex;
  margin-bottom: 20px;
  &-d1{
    width: 80px;
    line-height: 40px;
  }
}
.location{
  margin-top: 10px;
  &-prompt{
    color:#C6C8D0;
  }
}
</style>
